<template>
  <view>
    <my-navbar
      @leftClick="navBack"
      title="收藏"
      @rightClick="changeCheck"
      :rightText="isCheck ? '' : '清空'"
      rightColor=""
      background=""
      leftText=""
    ></my-navbar>
    <view v-if="list.length">
      <view class="shop">
        <view class="shop_name">
          <u-checkbox
            v-model="flag"
            active-color="#40AE36"
            shape="circle"
            v-show="isCheck"
          ></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <text>菜东家生鲜 </text
          ><u-icon
            name="arrow-right"
            color="#999"
            size="14"
            style="margin-left: 10rpx"
          ></u-icon>
        </view>
        <view class="shop_item">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <view class="shop_item_info">
            <view class="shop_item_info_name"> 江西赣南脐橙可吸果冻橙 </view>
            <view class="shop_item_info_collect"> 收藏10人+ </view>
            <view class="shop_item_info_price">
              ￥<text style="font-size: 32rpx">45</text>
            </view>
            <view class="shop_item_info_lose"> 已失效 </view>
          </view>
        </view>
        <!-- <view class="shop_item">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <view class="shop_item_info">
            <view class="shop_item_info_name"> 江西赣南脐橙可吸果冻橙 </view>
            <view class="shop_item_info_collect"> 收藏10人+ </view>
            <view class="shop_item_info_price">
              ￥<text style="font-size: 32rpx">45</text>
            </view>
            <view class="shop_item_info_lose"> 已失效 </view>
          </view>
        </view> -->
      </view>
      <view class="shop">
        <view class="shop_name">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <text>菜东家生鲜</text
          ><u-icon
            name="arrow-right"
            color="#999"
            size="14"
            style="margin-left: 10rpx"
          ></u-icon>
        </view>
        <view class="shop_item">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <view class="shop_item_info">
            <view class="shop_item_info_name"> 江西赣南脐橙可吸果冻橙 </view>
            <view class="shop_item_info_collect"> 收藏10人+ </view>
            <view class="shop_item_info_price">
              ￥<text style="font-size: 32rpx">45</text>
            </view>
            <view class="shop_item_info_lose"> 已失效 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="no_data" v-else>
      <view>
        <image src="../../static/images/no_data.png"></image>
        <text>抱歉，您还没有收藏商品哦</text>
      </view>
    </view>
    <view class="submitBar" v-show="isCheck">
      <u-checkbox shape="circle">全选</u-checkbox>
      <view class="submitBar_button">
        <view class="button" style="--color: #333333">加入购物车</view>
        <view class="button" style="--color: #f23434">删除</view>
      </view>
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      isCheck: false,
      list: [1],
      flag: false,
      page: 1,
    };
  },
  onShow() {
    this.getCollectList();
  },
  methods: {
    // 获取购物车列表
    getCollectList() {
      if (this.page == 1) {
        this.list = [];
        this.count = null;
      }
      let params = {
        page: this.page,
        size: 10,
      };
      $https("GET", "getCollection", params, (res) => {
        console.log("1111", res.data.errcode);
        if (res.data.errcode == 0) {
          console.log(res);
          this.list = res.data.data.list;
          console.log(this.list.lenght, "list");
        }
      });
    },
    // 返回
    navBack() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    // 管理
    changeCheck() {
      this.isCheck = !this.isCheck;
    },
  },
};
</script>

<style lang="scss">
/deep/.my_navbar {
  border-bottom: none;
}

/deep/.u-checkbox {
  width: 40rpx;
  margin-left: 20rpx;
}

.shop {
  width: 700rpx;
  background: #ffffff;
  border-radius: 10px;
  margin: 0 auto 20rpx;

  &_name {
    display: flex;
    height: 90rpx;
    line-height: 90rpx;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    border-bottom: 1rpx solid #ebebeb;
    image {
      width: 25rpx;
      height: 25rpx;
      border-radius: 40rpx;
      margin: 0 20rpx;
      border: 1px solid #999999;
    }
  }

  &_item {
    display: flex;
    align-items: center;
    height: 220rpx;
    padding: 20rpx 0;
    box-sizing: border-box;

    image {
      width: 220rpx;
      height: 180rpx;
      margin: 0 20rpx;
    }

    &_info {
      height: 100%;

      &_name {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      &_collect {
        font-size: 22rpx;
        font-family: PingFang SC;
        color: #999999;
        margin-top: 15rpx;
      }

      &_price {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #f55726;
      }
      &_lose {
        width: 80rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #eeeeee;
        border-radius: 4px;
        text-align: center;
        font-size: 22rpx;
        font-family: PingFang SC;
        color: #999999;
      }
    }
  }
}
.no_data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100rpx - var(--status-bar-height));
  view {
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      width: 250rpx;
      height: 250rpx;
    }
    text {
      margin-top: 85rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      color: #999999;
    }
  }
}
.submitBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  height: 100rpx;
  width: 100%;
  padding: 0 30rpx 0 60rpx;
  background: #ffffff;
  /deep/.u-checkbox {
    width: auto;
    margin-left: 0;
  }
  &_button {
    display: flex;
    .button {
      width: 178rpx;
      height: 70rpx;
      line-height: 70rpx;
      border: 1rpx solid var(--color);
      color: var(--color);
      border-radius: 35rpx;
      text-align: center;
    }
    .button:nth-child(1) {
      margin-right: 20rpx;
    }
  }
}
</style>
